<template>
  <div id="content">
    <div class="loginHeader">
      <i @click="routeOut" class="iconfont icon-fanhui noClick"></i>
    </div>
    <div class="userImg">
      <img :src="user.userImg" @click="outLoginFn" alt srcset />
      <p>{{user.name}}</p>
    </div>
    <ul class="userOperation blackOrWhite">
      <li>
        <span>我的收藏</span>
        <i  class="iconfont icon-arrow-right-copy"></i>
      </li>
      <li>
        <span>消息中心</span>
        <i  class="iconfont icon-arrow-right-copy"></i>
      </li>
    </ul>
    <lfooter />
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import v_footer from "@/components/footer.vue";
export default {
  name: "User",
  components: {
    lfooter: v_footer,
  },
  computed: {
    ...mapState("login", ["isLogin", "user"]),
  },
  methods: {
    ...mapActions("login", ["set_chenge_isLogin"]),
    routeOut() {
      this.$router.go(-1);
    },
    outLoginFn() {
      this.$dialog
        .confirm({
          message: "登录功能暂未开发，将模拟退出登录！",
        })
        .then(() => {
          this.set_chenge_isLogin(2);
        })
        .catch(() => {
        });
    },
  },
};
</script>

<style lang="scss" scoped>
#content {
  height: 100%;
}
.loginHeader {
  padding: 0.1rem;
  font-weight: 700;
}
.userImg {
  margin-top: 0.2rem;
  text-align: center;
  img {
    border-radius: 50%;
    height: 0.65rem;
    width: 0.65rem;
  }
  p {
    padding: 0.1rem;
    font-weight: 700;
    font-size: 0.2rem;
  }
}
.userOperation {
  li {
    font-size: 0.18rem;
    padding: 0.15rem;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>